<template>
    <div class="container">
        <div class="title">
            <span>添加</span>
            <span class="back" @click="back">
        <i class="iconfont icon-fanhui"></i> 返回
      </span>
        </div>
        <el-divider></el-divider>
        <br/>
        <el-form label-width="120px"
                 :model="form"
                 status-icon
                 ref="form"
                 @submit.native.prevent>
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <el-form-item label="图片" prop="img_id">
                        <upload-imgs
                                ref="uploadEle"
                                :value="imgValue"
                                :rules="rules"
                                :multiple="true"
                                :sortable="true"
                                :min-num="1"
                                :max-num="30"
                        />
                        <div>推荐上传 </div>
                    </el-form-item>
                    <el-form-item label="房间名称" prop="name">
                        <el-input size="medium" v-model="form.name" placeholder="请填写房间名称"></el-input>
                    </el-form-item>
                    <el-form-item label="房间标题" prop="title">
                        <el-input size="medium" v-model="form.title" placeholder="请填写房间标题"></el-input>
                    </el-form-item>
                    <el-form-item label="房间价格" prop="price">
                        <el-input size="medium" type="number" v-model="form.price" placeholder="请填写房间价格"></el-input>
                    </el-form-item>
                    <el-form-item label="会员价格" prop="discount_price">
                        <el-input size="medium" type="number" v-model="form.discount_price" placeholder="请填写钟点房价格"></el-input>
                    </el-form-item>
                    <el-form-item label="酒店简介" prop="introduce">
                        <el-input v-model="form.introduce"
                                  type="textarea"
                                  :rows="5"
                                  placeholder="请填写酒店简介"></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="基础信息">
                    <el-form-item label="基础信息" prop="traffic">
                        <el-button type="primary" plain @click="handleBasisAdd" icon="el-icon-plus">添加</el-button>
                    </el-form-item>
                    <el-form-item label="选项" v-for="(item,index) in form.basis" prop="name" v-bind:key="index">
                        <el-select  size="medium" filterable v-model="item.basis_id" placeholder="请选择" clearable style="width: 20%;">
                            <el-option
                                    v-for="(items, index) in basisArr"
                                    :key="index"
                                    :label="items.name"
                                    :value="items.id">
                            </el-option>
                        </el-select>
                        <el-input size="medium" v-model="item.name" placeholder="请填写名称" style="width: 20%;margin-left: 10px;"></el-input>
                        <el-input size="medium" v-model="item.explain" placeholder="请填写说明" style="width: 20%;margin-left: 10px;"></el-input>
                        <el-button type="danger" style="margin-left: 20px;" @click="delBasis(index)">删除</el-button>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="标签设置">
                    <el-form-item label="标签" prop="tag">
                        <el-button type="primary" plain @click="handleTagAdd" icon="el-icon-plus">添加</el-button>
                    </el-form-item>
                    <el-form-item label="选项" v-for="(item,index) in form.tag" prop="name" v-bind:key="index">
                        <el-input size="medium" v-model="item.name" placeholder="请填写名称" style="width: 40%;margin-left: 10px;"></el-input>
                        <el-button type="danger" style="margin-left: 20px;" @click="delTag(index)">删除</el-button>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="设施与服务">
                    <el-form-item label="设施与服务" prop="facility">
                        <el-button type="primary" plain @click="handleFacilityAdd" icon="el-icon-plus">添加</el-button>
                    </el-form-item>
                    <el-form-item label="选项" v-for="(item,index) in form.facility" prop="name" v-bind:key="index">
                        <el-select  size="medium" filterable v-model="item.facility_id" placeholder="请选择" clearable style="width: 20%;">
                            <el-option
                                    v-for="(items, index) in facilityArr"
                                    :key="index"
                                    :label="items.name"
                                    :value="items.id">
                            </el-option>
                        </el-select>
                        <el-button type="danger" style="margin-left: 20px;" @click="delFacility(index)">删除</el-button>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="入住要求">
                    <el-form-item label="入住要求" prop="facility">
                        <el-button type="primary" plain @click="handleClaimAdd" icon="el-icon-plus">添加</el-button>
                    </el-form-item>
                    <el-form-item label="选项" v-for="(item,index) in form.claim" prop="name" v-bind:key="index">
                        <el-input size="medium" v-model="item.name" placeholder="请填写名称" style="width: 40%;margin-left: 10px;margin-right: 20px;"></el-input>
                        <el-radio v-model="item.status" label="1">具备</el-radio>
                        <el-radio v-model="item.status" label="2">不具备</el-radio>
                        <el-button type="danger" style="margin-left: 20px;" @click="delClaim(index)">删除</el-button>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
            <el-form-item class="submit" style="margin-top: 30px;">
                <el-button type="primary" @click="submitForm()">保 存</el-button>
                <el-button @click="resetForm('form')">重 置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import room from '@/models/room'
import basis from '@/models/basis'
import facility from '@/models/facility'
import UploadImgs from '@/components/base/upload-imgs'
import User from '@/lin/models/user'

export default {
  components: {
    UploadImgs,
  },
  data() {
    return {
      basisArr: [],
      facilityArr: [],
      imgValue: [],
      form: {
        lin_user_id: '',
        name: '',
        title: '',
        price: '',
        discount_price: '',
        introduce: '',
        basis: [],
        tag: [],
        facility: [],
        claim: [],
      },
      rules: {
        maxSize: 0.2,
      },
    }
  },
  created() {
    this.getBasisAll()
    this.getFacilityAll()
    this.getAdminUser()
  },
  methods: {
    //
    async getAdminUser() {
      const res = await User.getInformation()
      this.form.lin_user_id = res.linUserId
    },
    // 获取基础全部信息
    async getBasisAll() {
      this.basisArr = await basis.getBasisAll()
    },
    // 添加基础内容
    handleBasisAdd() {
      this.form.basis.push({
        basis_id: '',
        name: '',
        explain: '',
      })
    },
    delBasis(index) {
      this.form.basis.splice(index, 1)
    },
    // 添加标签
    handleTagAdd() {
      this.form.tag.push({
        name: '',
      })
    },
    delTag(index) {
      this.form.tag.splice(index, 1)
    },
    // 获取全部设施
    async getFacilityAll() {
      this.facilityArr = await facility.getFacilityAll()
    },
    // 添加设施
    handleFacilityAdd() {
      this.form.facility.push({
        facility_id: '',
      })
    },
    delFacility(index) {
      this.form.facility.splice(index, 1)
    },
    // 添加入住要求
    handleClaimAdd() {
      this.form.claim.push({
        name: '',
        status: '1',
      })
    },
    delClaim(index) {
      this.form.claim.splice(index, 1)
    },
    async submitForm() {
      const self = this
      const imgValue = await self.$refs.uploadEle.getValue()
      const imgs = []
      imgValue.forEach((item) => {
        imgs.push({ img_id: item.imgId })
      })
      // eslint-disable-next-line no-unused-vars
      const info = {
        lin_user_id: self.form.lin_user_id,
        imgs,
        name: self.form.name,
        title: self.form.title,
        price: self.form.price,
        discount_price: self.form.discount_price,
        introduce: self.form.introduce,
        basis: self.form.basis,
        tag: self.form.tag,
        facility: self.form.facility,
        claim: self.form.claim,
      }
      try {
        // eslint-disable-next-line no-unused-vars
        const res = await room.createRoom(info)
        if (res.error_code === 0) {
          this.$message.success(`${res.msg}`)
          this.back()
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    back() {
      this.$emit('addClose')
    },
  },
}
</script>

<style lang="scss" scoped>
    .el-divider--horizontal {
        margin: 0
    }

    .container {
        .title {
            height: 59px;
            line-height: 59px;
            color: $parent-title-color;
            font-size: 16px;
            font-weight: 500;
            text-indent: 40px;

            .back {
                float: right;
                margin-right: 40px;
                cursor: pointer;
            }
        }

        .wrap {
            padding: 20px;
        }

        .submit {
            float: left;
        }
    }
</style>
